<script setup lang="ts">
import type { LivesList } from '../../typings'
const { list } = defineProps<{
    list: LivesList
}>()
</script>


<template>
    <div class="live-cred mt-2 px-3 py-9">


        <div class="content relative" v-lazy:background-image="list.bgImg"
            :style="{ backgroundImage: `url(${list.bgImg})`, backgroundSize: '100% 100%' }">
            <div class="mask w-full h-full absolute left-0 top-0" style=" background-color: rgba(0,0,0,.1);">
            </div>
            <div class="user flex items-center absolute -top-8 left-4 z-10">
                <img class=" w-12 h-12 rounded-full" :src="list.avatar" alt="">
                <span class=" px-2 pb-5">{{ list.userName }}</span>
            </div>

            <div class="item-list absolute bottom-0 p-3 text-white text-xs">

                <div class="state px-1 flex items-center w-28" style=" background-color: rgba(0,0,0,.2);">

                    <span class=" w-2 h-2 rounded-full bg-red-500"></span>
                    <span class="mx-2">直播中</span>
                    <span>{{ list.visitorCount > 100000 ? (list.visitorCount / 10000) + 'W' : list.visitorCount}}</span>

                </div>

                <div class="title py-2 text-base font-bold w-full overflow-hidden whitespace-nowrap text-ellipsis">
                    {{ list.intro }}
                </div>

                <div class="bottom-item w-full flex ">

                    <div class="left w-3/5  mr-2">
                        <ul class=" flex">
                            <li class="mx-1 relative" v-lazy:background-image="s.cover"
                                :style="{ backgroundImage: `url(${s.cover})`, backgroundSize: '100% 100%', width: '60px', height: '60px' }"
                                v-for="s in list.shopCarts.goods" :key="s.itemId">
                                <span class=" absolute bottom-0 px-1 text-sm text-white z-10">{{ s.price }}</span>
                                <span class=" absolute  w-full h-full left-0 top-0" style="background-color: rgba(0,0,0,.1);"></span>
                            </li>
                        </ul>
                    </div>

                    <div class="right w-2/5">

                        <ul class=" h-full flex flex-col justify-between">
                            <li class="flex " v-for="c in list.comments" :key="c.commentId">
                              <img class=" w-4 h-4 rounded-full" v-lazy="c.avatar" :src="c.avatar" alt="">
                              <div class=" w-28  overflow-hidden whitespace-nowrap text-ellipsis">
                                {{ c.content }}
                              </div>
                            </li>
                        </ul>

                    </div>

                </div>

            </div>
        </div>

    </div>
</template>


<style lang="scss" scoped>
.live-cred {
    .content {
        width: 100%;
        height: 200px;
    }
}</style>